{% extends 'base.html' %}
{% load static %}
{% block title %}模块测试结果统计{% endblock %}
{% block content %}

<style>
    .center{
         width:500px,
         margin-left: 10px;
         background-color: bisque;
         }


</style>
<body>
<p style="margin-left: 10px;">
    <span style="margin-left: 5px;"> 【{{ test_module.name }}】执行统计结果：成功 {{ success_num }} 次，失败 {{ fail_num }} 次</span>
</p>
<p style="margin-left: 10px;">
    <span></span>
</p>
<div class="center" id="main" style="width: 600px; height:400px; margin-left: 10px;" align="center"></div>
<!--<script src="{% static 'js/echarts.simple.min.js' %}"></script>-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
        // 绘制图表。
        echarts.init(document.getElementById('main')).setOption({
            title: {
                text: '统计结果',
                subtext: '即时数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
               orient: 'vertical',
               left: 'left'
            },
            series: {
                name: '结果统计',
                radius: '55%',
                type: 'pie',
                color: ['green', 'red'],
                data: [
                    {name: '成功用例数', value: {{ success_num }}},
                    {name: '失败用例数', value: {{ fail_num }}},

                ],
                label:{
                        normal:{
                            show:true,
                            formatter: "{b} : {c} ({d}%)"
                        }
                    }
            }
        });

</script>
</body>

{% endblock %}
